draw({
  yAxis: false,
  id: "#svg",
  color: "#abf",
});

//准备数据
data = {
  title: "德系汽车12月份前5销售量",
  xLabels: ["宝马", "奔驰", "奥迪", "大众", "保时捷"],
  values: [6000, 4500, 5000, 7000, 3000],
};

//绘制准备
const svg = document.querySelector("#svg");
const NS = "http://www.w3.org/2000/svg";

//计算数值最大范围
const maxValue = data.values.reduce((e1, e2) => Math.max(e1, e2));
const len = (maxValue + "").length;
const unit = Math.pow(10, len - 1);
const upLimit = (maxValue % unit == 0 ? maxValue : maxValue / unit) + unit;

//绘制标题
const titleText = document.createElementNS(NS, "text");
titleText.innerHTML = data.title;
titleText.setAttribute("x", 10);
titleText.setAttribute("y", 15);
titleText.classList.add("title");

//绘制y轴数值
const yDataSpace = upLimit / 5;
const ySpace = 200 / 5;
let g = document.createElementNS(NS, "g");
g.classList.add("y-text");
svg.appendChild(g);
for (let i = 0; i <= 5; i++) {
  const text = document.createElementNS(NS, "text");
  text.innerHTML = (i * yDataSpace + "").replace(/(?=\B(\d{3})+$)/, ",");
  text.setAttribute("x", 23);
  text.setAttribute("y", 225 - i * ySpace + 2);
  g.appendChild(text);
}

//绘制x轴竖线
const xSpace = 200 / data.xLabels.length;
const g1 = document.createElementNS(NS, "g");
const xLinePath = document.createElementNS(NS, "path");
g1.appendChild(xLinePath);
g1.classList.add("x-line");
svg.appendChild(g1);
let d = "";
for (let i = 0; i <= data.xLabels.length + 1; i++) {
  d += `M${25 + i * xSpace} 225V230`;
}
xLinePath.setAttribute("d", d);

//绘制x轴标签文字
const g2 = document.createElementNS(NS, "g");
g2.classList.add("x-text");
svg.appendChild(g2);
data.xLabels.forEach((label, i) => {
  const text = document.createElementNS(NS, "text");
  text.setAttribute("x", 25 + i * xSpace + xSpace / 2);
  text.setAttribute("y", 235);
  text.innerHTML = data.xLabels[i];
  g2.appendChild(text);
});

//绘制柱形
const ratio = 200 / upLimit;
const width = xSpace / 2;
g = document.createElementNS(NS, "g");
g.classList.add("pillar");
svg.appendChild(g);
data.values.forEach((val, i) => {
  const height = val * ratio;
  const rect = document.createElementNS(NS, "rect");
  rect.setAttribute("x", 25 + i * xSpace + xSpace / 4);
  rect.setAttribute("y", 225 - height);
  rect.setAttribute("width", width);
  rect.setAttribute("height", height);
  rect.setAttribute("value", val);
  g.appendChild(rect);
});

//设置鼠标移入时的数据展示(使用事件委托)
const panel = document.querySelector('#data-panel');
svg.onmouseover = function(e){
    if(e.target.tagName == 'rect'){
        panel.style.display = 'block' ;
        panel.innerHTML = e.target.getAttribute('value') ;
        panel.style.left = e.clientX + 5 + 'px' ;
        panel.style.top = e.clientY +5 + 'px' ;
        e.target.onmouseout = function(){
            panel.style.display = 'none' ;
            this.onmouseout = null ;
        }
    }
}